var React = require('react');

var userId;

var PostList = React.createClass({
  getInitialState: function () {
    return {
      postList: []
    };
  },

  componentDidMount: function () {
    console.log(userId);
    $.getJSON(baseUrl + "getTextList/" + "1/-1/" + userId + "/NULL/NULL/", function (result, status) {
      console.log(result.data);
      if (this.isMounted()) {
        this.setState({
          postList: result.data
        });
      }
    }.bind(this));
  },

  render: function () {
    return (
      <div>
        <div className="devide-title"><h1>我的文章</h1></div>
        <ul className="post-list">
          {this.state.postList.map(function (post) {
          var href = 'post.html?id=' + post.id;
          return (
              <li key={post.id}>
                <a href={href} target="_blank">{post.title}</a>
                <div>
                  <span className="post-type">{post.text_type}</span>
                  <span className="post-time">发表时间：{post.update_date}</span>
                </div>
              </li>
          )
        })}
        </ul>
      </div>
    );
  }
});

var WordList = React.createClass({
  getInitialState: function () {
    return {
      resultList: []
    };
  },

  componentDidMount: function () {
    $.getJSON(baseUrl + "getWordsByuserId/" + userId, function (result, status) {
      console.log(result.data);
      if (this.isMounted()) {
        this.setState({
          resultList: result.data
        });
      }
    }.bind(this));
  },

  handleNewWord: function () {
    var word = $('#new-word-box').val();
    if ($.isBlank(word)) {
      console.log("return");
      return;
    }

    var url = baseUrl + "postWords/" + userId + "/" + word;
    $.getJSON(url, function (result, status) {
      console.log(result.data);
      if (this.isMounted()) {
        this.setState({
          resultList: result.data
        });
      }
    }.bind(this));
  },

  render: function () {
    return (
      <div>
        <div className="devide-title"><h1>留言</h1></div>
        <div className="word-list">
          {this.state.resultList.map(function (e) {
          // var href = 'post.html?id=' + word.id;
          return (
              <div className="comment" key={e.id}>
                <div className="comment-image">
                  <img alt="Logo image" src="avatar.png"/>
                </div>
                <div className="comment-content">
                  <h1>{e.from.username}</h1>
                  <p>{e.word}</p>
                  <p className="comment-detail">{e.create_date}</p>
                </div>
              </div>
          );
        })}
          <div>
            <textarea id="new-word-box" placeholder="说点什么..."/>
            <input id="new-word-button" onClick={this.handleNewWord} type="button" value="发表"/>
          </div>
        </div>
      </div>
    );
  }
});

var LinkList = React.createClass({
  getInitialState: function () {
    return {
      resultList: []
    };
  },

  componentDidMount: function () {
    $.getJSON(baseUrl + "getLinkTypeList", function (result, status) {
      console.log("link", result.data);
      if (this.isMounted()) {
        this.setState({
          resultList: result.data
        });
      }
    }.bind(this));
  },
  handleSignOut: function () {
    $.getJSON(baseUrl + "logout", function (result, status) {
      location.href = '/';
    });
  },
  render: function () {
    return (
      <div>
        <div className="devide-title"><h1>相关链接</h1></div>
        <div className="link-list">
          <li><a href="dashboard.html">控制台</a></li>
          <li><a href="search.html">搜索</a></li>
          <li><a href="#" onClick={this.handleSignOut}>注销</a></li>
          {this.state.resultList.map(function (e) {
          // var href = 'post.html?id=' + word.id;
          return (
              <li key={e.id}>
                {e.word}
              </li>
          )
        })}
        </div>
      </div>
    );
  }
});

var Blog = React.createClass({
  getInitialState: function () {
    return {
      isDone: false
    };
  },

  componentDidMount: function () {
    userId = $.getQuery('id');
    if ($.isBlank(userId)) {
      $.getJSON(baseUrl + "getCurrentUser").done(function (result) {
        switch (result.code) {
        case 900:
          let userInfo = result.data[0];
          userId = userInfo.id;
          if (this.isMounted()) {
            this.setState({
              isDone: true
            });
          }
          break;
        case 912:
          console.log(result.message);
          location.href = "/"
          break;
        }
      }.bind(this));
    } else {
      if (this.isMounted()) {
        this.setState({
          isDone: true
        });
      }
    }
  },

  render: function () {
    if (this.state.isDone) {
      return (
        <div className="blog">
          <PostList/>
          <WordList/>
          <LinkList/>
        </div>
      );
    } else {
      return (
        <div>加载中</div>
      );
    }

  }
});

module.exports = Blog;
